<template>
  <div>
    <div id="mars3dContainer" class="mars3d-container"></div>
  </div>
</template>
<script setup lang="ts">
import * as mars3d from "mars3d"

import { onMounted, ref } from 'vue';
import { initMap, map } from "./map";
//加载地图
onMounted(async () => {
  await initMap();
  mapKindergarten()
});


const arr = [
  { grid: '{"type":"Point","coordinates":[118.803228, 32.043092]}', name: '测试', remark: 'xx区' },
  //其他数据...
];
let pointLayer: any;
/**
* Date:2024/3/21
* Author:zx
* Function:【地图点分布】
* @param 无
*/
const mapKindergarten = () => {
  // 初始化地图
  // 创建一个用于存放所有点位的图层
  pointLayer = new mars3d.layer.GraphicLayer({
    name: 'PointLayer',
    hasEdit: false,
    isAutoEditing: false
  });

  // 将图层添加到地图
  map.addLayer(pointLayer);
  // 遍历数组，为每个点位数据创建图形点
  arr.forEach((pointData: any) => {
    // 解析点位的坐标
    const coordinates = JSON.parse(pointData.grid).coordinates;

    // 创建 Mars3D 中的点对象(默认点位样式)
    //                 const pointGraphic = new mars3d.graphic.PointEntity({
    //                 position: coordinates,
    //                 attr: pointData,
    //                 style: {
    //                     color: mars3d.Cesium.Color.RED,
    //                     pixelSize: 10,
    //                     scale: 1,
    //                     image: undefined,
    //                 }
    // });
    // 创建自定义图标点
    // 创建 Mars3D 中的点对象(默认点位样式)
    const pointGraphic = new mars3d.graphic.BillboardEntity({
      position: coordinates,
      attr: pointData,
      style: {
        pixelSize: 10,
        scale: 0.5,
        image: "//data.mars3d.cn/img/marker/mark-blue.png",
      }
    });

    // 添加点位点击事件
    pointGraphic.on(mars3d.EventType.click, function (event: any) {
      console.log('点击了点位', event);
    });
    // 将点对象添加到图层
    pointLayer.addGraphic(pointGraphic);
  });


};



// 组件卸载之前销毁mars3d实例
onUnmounted(() => {
  if (map) {
    map.destroy();
    map = null;
  }
  console.log("map销毁完成", map);
});
</script>
<style scoped lang="scss">
.mars3d-container {
  width: 100%;
  height: 100%;
}
</style>